@extends('Layout/main')
@section('content')
    @include('layout.error')
    @include('layout.message')
    <div class="col-sm-8 blog-main">
        <div>
            <div class="blog-post">
                <h2 class="blog-post-title">
                    {{$article->title}}
                    @if(Auth::check()&&Auth::user()->can('update',$article))
                        {{-- @can('update',$article)--}}
                        <a href="/article/{{{$article->id}}}/edit">
                            <span class="glyphicon glyphicon-pencil" style="font-size: 16px"></span>
                        </a>
                        <a href="/article/{{{$article->id}}}/delete" onclick="confirm('确认删除？')">
                            <span class="glyphicon glyphicon-remove" style="font-size: 16px"></span>
                        </a>
                        {{-- @endcan--}}
                    @endif
                </h2>
                <p class="blog-post-meta">{{$article->created_at->toDayDateTimeString()}} by <a
                            href="/user/{{$article->user_id}}">{{$article->user->name}}</a></p>
                <p>{!! $article->content  !!}
                <p class="blog-post-meta">赞 0 | 评论 {{$article->comments_count}}</p>
            </div>

            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">评论</div>

                <!-- List group -->
                <ul class="list-group">
                    @foreach($article->comments as $comment)
                        <li class="list-group-item">
                            <h5>{{$comment->created_at}} by {{$comment->user->name}}</h5>
                            <div class="alert alert-success" id="comment{{$comment->id}}">
                                {{$comment->content}}
                                <div style="float:right;font-size: 14px">
                                    <a href="btn btn-primary">点赞</a>
                                    <a class="btn btn-primary" data-toggle="modal"
                                       href="#modal-id{{$comment->id}}">回复</a>
                                    <div class="modal fade" id="modal-id{{$comment->id}}">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-hidden="true">&times;
                                                    </button>
                                                    <h4 class="modal-title">回复 {{$comment->user->name}}</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <textarea name="content" id="comment_reply{{$comment->id}}"
                                                              class="form-control" cols="30" rows="10"></textarea>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                    <button type="button" class="btn btn-primary"
                                                            onclick="reply({{$comment->id}},{{$comment->user->id}},'{{$comment->user->name}}')">
                                                        提交
                                                    </button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                </div>
                                <div class='clear' style="clear:both "></div>
                                <div>
                                    @foreach($comment->replys as $reply)
                                        <div class="alert alert-info" id="reply{{$reply->id}}">
                                            <img src="{{$reply->user->thumb}}" class="img-rounded"
                                                 style="border-radius:50%;width: 20px">
                                            <strong>{{$reply->from_user_name}} @ {{$reply->to_user_name}} : </strong>
                                            {{$reply->content}}
                                            <a class="btn btn-primary" style="float: right" data-toggle="modal" href="#rmodal-id{{$reply->id}}">回复</a>
                                            <div class="modal fade" id="rmodal-id{{$reply->id}}">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-hidden="true">&times;
                                                            </button>
                                                            <h4 class="modal-title">回复 {{$reply->from_user_name}}</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                           <textarea name="content" id="reply_textarea{{$reply->id}}"
                                                                     class="form-control" cols="30" rows="10"></textarea>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default"
                                                                    data-dismiss="modal">取消
                                                            </button>
                                                            <button type="button" class="btn btn-primary" onclick="reply1({{$reply->id}},{{$comment->id}},{{$reply->from_user_id}},'{{$reply->from_user_name}}')">提交
                                                            </button>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                                </div><!-- /.modal-dialog -->
                                            </div><!-- /.modal -->
                                            <br>
                                            <strong>{{$reply->created_at}}</strong>
                                        </div>
                                    @endforeach
                                </div>
                                <span>总回复数:{{\App\Comment::withCount('replys')->find($comment->id)->replys_count}}</span>
                                <button class="btn btn-sm" onclick="total_reply({{$comment->id}})">查看所有回复</button>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">发表评论</div>

                <!-- List group -->
                <ul class="list-group">
                    <form action="/article/{{$article->id}}/comment" method="post">
                        {{csrf_field()}}
                        <li class="list-group-item">
                            <textarea name="content" class="form-control" rows="10"></textarea>
                            <button class="btn btn-default" type="submit" onclick="sendCheck()">提交</button>
                        </li>
                    </form>

                </ul>
            </div>
        </div><!-- /.blog-main -->
    </div>
@endsection
@section('my_js')
    <script>
        function sendCheck() {
            if (!'{{Auth::check()}}') {
                alert('请登录');
                return false;
            }
        }

        function reply1(reply_id,comment_id, user_id, user_name) {
            sendCheck();
            $.ajax({
                url: '/comment/' + comment_id + '/reply',
                type: 'post',
                data: {
                    comment_id: comment_id,
                    to_user_id: user_id,
                    to_user_name: user_name,
                    content: $('#reply_textarea' + reply_id).val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    res = JSON.parse(res);
                    $('#rmodal-id' + reply_id).modal('hide');
                    $('#reply_textarea' + reply_id).val('');
                    var str = '<div class="alert alert-info"><img src="' + res.from_user_thumb + '" class="img-rounded" style="border-radius:50%;width: 20px"><strong>' + res.from_user_name + ' @ ' + res.to_user_name + ' :</strong>' + res.content + '<br><strong>' + res.created_at + '</strong></div>';
                    $('#reply' + reply_id).children('strong').append(str);
                }
            })
        }

        function reply(comment_id, user_id, user_name) {
            sendCheck();
            $.ajax({
                url: '/comment/' + comment_id + '/reply',
                type: 'post',
                data: {
                    comment_id: comment_id,
                    to_user_id: user_id,
                    to_user_name: user_name,
                    content: $('#comment_reply' + comment_id).val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    res = JSON.parse(res);
                    // var res=JSON.parse(result);
                    $('#modal-id' + comment_id).modal('hide');
                    $('#comment_reply' + comment_id).val('');
                    var str = '<div class="alert alert-info"><img src="' + res.from_user_thumb + '" class="img-rounded" style="border-radius:50%;width: 20px"><strong>' + res.from_user_name + ' @ ' + res.to_user_name + ' :</strong>' + res.content + '<br><strong>' + res.created_at + '</strong></div>';
                    $('#comment' + comment_id).children('.clear').append(str);
                }
            })
        }

        function total_reply(comment_id) {
            $.ajax({
                url: '/comment/' + comment_id + '/total_reply',
                type: 'get',
                error: function (res, s, ass) {
                    console.log(res, s, ass);
                },
                success: function (res) {
                    res = JSON.parse(res);
                    console.log(typeof res);
                    var str = '';
                    for (let key in res) {
                        str += '<div class="alert alert-info"><img src="' + res[key].from_user_thumb + '" class="img-rounded" style="border-radius:50%;width: 20px"><strong>' + res[key].from_user_name + ' @ ' + res[key].to_user_name + ' :</strong>' + res[key].content + '<br><strong>' + res[key].created_at + '</strong></div>'
                    }
                    $('#comment' + comment_id+' .alert-info').remove();
                    $('#comment' + comment_id).children('.clear').append(str);
                    $('#comment' + comment_id+' .btn-sm').text('收起');
                    $('#comment' + comment_id+ ' .btn-sm').attr('onclick', 'item_reply(' + comment_id + ')');
                }
            })
        }

        function item_reply(comment_id) {
            $('#comment' + comment_id+' .btn-sm').text('查看全部回复');
            $('#comment' + comment_id+' .btn-sm').attr('onclick', 'total_reply(' + comment_id + ')');
            $('#comment' + comment_id+' .alert-info').eq(1).nextAll('.alert-info').css('display', 'none');
        }
    </script>
@endsection